{% extends "base_item.html" %}
{% load static %}
{% block content %}
    <style>
        .ui-btn-theme {
            padding: 0 18px;
            font-size: 14px;
            line-height: 30px;
            color: #fff;
            border: 1px solid #80bef1;
            background-color: #4ea9f3;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            text-align: right;
        }

        .uc-btn-md {
            width: 100px;
            line-height: 28px;
        }
    </style>

    <!-- =======================以上为公共头部 ======================  -->

    <!--head end-->
    <link href="{% static 'images/css/inner.css' %}" rel="stylesheet" type="text/css">
    <div class="obanner">
        <!-- pc端banner -->
        <img src="{% static 'images/banner_yfsl.jpg' %}" class="hidden_xs" width="100%" alt=""/>
        <!-- phone 端banners -->
        <img src="{% static 'images/banner_yfsl.jpg' %}" class="hidden_lg" width="100%" alt=""/>
    </div>
    <div class="bread">
        <div class="bread_text wrap">
            <span>当前位置：<a href="{% url 'index' %}">首页</a>
            <span>&gt;</span> <a href="{% url 'index' %}?web={{ article.web }}">{{ article.web }}</a>
                {% if article.category %}
                    <span>&gt;</span>
                    <a href="{% url 'index' %}?web={{ article.web }}&category={{ article.category }}">{{ article.category }}</a></span>
                {% endif %}
            {% if article.category2 %}
                <span>&gt;</span>
                <a href="{% url 'index' %}?category={{ article.category }}&category2={{ article.category2 }}">{{ article.category2 }}</a></span>
            {% endif %}
        </div>
    </div>
    <!--inner start -->
    <div class="inner wrap clearfix">

        <aside class="right">
            <div class="navbox">
{#                <div class="nav-title">#}
{#                    <h2>广告位</h2>#}
{#                    <span class="icon_dot"></span>#}
{#                </div>#}
                <div class="nav-con">
                    {% for ad in ads %}
                        {% if ad.is_active %}
                        <div style="margin-bottom: 5px; margin-left: -14px; border:1px solid rgb(221, 221, 221)">
                            <a href="{{ ad.url }}" target="_blank"><img width="250" src="media/{{ ad.img }}" alt="{{ ad.name }}"></a>
                        </div>
                        {% endif %}
                    {% endfor %}
                    {% if not ads %}
{#                        <p>抱歉，暂时没有广告</p>#}
                    {% endif %}

                    <!--div style="margin-bottom: 5px">
                        <a href="http://localhost:8080" style="color: lightblue;text-decoration:underline">1234</a>
                    </div>
                    <div style="margin-bottom: 5px">
                        <a href="http://localhost:8080" style="color: lightblue;text-decoration:underline">1234</a>
                    </div>
                    <div style="margin-bottom: 5px">
                        <a href="http://localhost:8080" style="color: lightblue;text-decoration:underline">1234</a>
                    </div-->
                    {#                        <dl>#}
                    {#                            <dt class="selected"><span class="common-img flex minus"></span><a href="javascript:;">佳汇释义</a> </dt>#}
                    {#                            <div class="su_leftmenu">#}
                    {#                                <dd class="left_navactive">#}
                    {#                                    <a href="javascript:;">何为佳汇工程</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">三项承诺</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">五项保障</a>#}
                    {#                                </dd>#}
                    {#                            </div>#}
                    {#                        </dl>#}
                    {#                        <dl>#}
                    {#                            <dt class=""><span class="common-img flex minus"></span><a href="javascript:;">佳汇材料</a> </dt>#}
                    {#                            <div class="su_leftmenu">#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">原材料篇</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">研发篇</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">生产篇</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">环保篇</a>#}
                    {#                                </dd>#}
                    {#                            </div>#}
                    {#                        </dl>#}
                    {#                        <dl>#}
                    {#                            <dt class=""><span class="common-img flex minus"></span><a href="javascript:;">佳汇施工</a> </dt>#}
                    {#                            <div class="su_leftmenu">#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">资质篇</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">安全篇</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">工艺篇</a>#}
                    {#                                </dd>#}
                    {#                            </div>#}
                    {#                        </dl>#}
                    {#                        <dl>#}
                    {#                            <dt class=""><span class="common-img flex minus"></span><a href="javascript:;">佳汇服务</a> </dt>#}
                    {#                            <div class="su_leftmenu">#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">售前</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">售中</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">售后</a>#}
                    {#                                </dd>#}
                    {#                            </div>#}
                    {#                        </dl>#}
                </div>
            </div>
        </aside>
        <style>
            .left .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .uc-btn-md_co {
                {#width: 0px;#}
                line-height: 28px;
        </style>
        <div class="left">
            <div class="" style="height: 63px;border-bottom: 2px solid rgb(225, 225, 225);margin-top: 5px;margin-bottom: 25px;">
            <div>
                <span style="font-size: 20px;font-weight: 500;color: #00a0e9;">{{ article.title }}</span>

                {% if co %}
                    <a class="ui-btn-theme uc-btn-md_co" style="float:right;background-color: #6b6b6b;border: 1px solid #1a1a1a;" href="{% url 'uc_collect' flag='article_detail' id=article.id %}">取消收藏</a>
                {% else %}
                    <a class="ui-btn-theme uc-btn-md_co" style="float:right;background-color: #ff8000;border: 1px solid #FFD34F;" href="{% url 'uc_collect' flag='article_detail' id=article.id %}">收藏</a>
                {% endif %}
            </div>
                <div style="margin-top: 5px">時間：{{ article.created_time }}   &nbsp&nbsp&nbsp   作者：{{ article.user }}</div>
            </div>
            <div class="content clearfix">
                {{ article.body|safe }}
            </div>
        </div>
        <!--inner end-->
    </div>
    <!-- ===============================以下为公共底部 ======================-->
{% endblock %}